<template>
  <div class="app-container">

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="bookQueryVo.leagueName" placeholder="课程名称"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="bookQueryVo.coachName" clearable placeholder="请选择教练">
          <el-option
            v-for="coach in coachDataList"
            :key="coach.id"
            :label="coach.name"
            :value="coach.name"/>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
    </el-form>



    <!-- 表格 -->
    <el-table :data="dataList" element-loading-text="数据加载中" fit highlight-current-row
              row-class-name="myClassList">
      <el-table-column prop="leagueName" label="课程名称"></el-table-column>
      <el-table-column prop="coachName" label="教练"></el-table-column>
      <el-table-column prop="gymName" label="场馆"></el-table-column>

      <el-table-column label="课程时间">
        <template slot-scope="scope">{{ scope.row.startTime}} : {{scope.row.endTime}}</template>
      </el-table-column>
      <el-table-column prop="numPeople" label="预约人数"></el-table-column>

      <el-table-column prop="status" label="签到状态" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="handleChangeStatus($event, scope.row.id)"
            style="display: block"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="已签到"
            inactive-text="未签到"
            :active-value="'YSgin'"
            :inactive-value="'NSgin'"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
<!--          <router-link :to="`/course/editCourse/${scope.row.id}`">
            <el-button type="text" size="mini" icon="el-icon-edit">预约记录</el-button>
          </router-link>-->

          <el-button type="text" size="mini" icon="el-icon-edit">预约记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import book from '../../api/book'
import coach from '../../api/coach'
export default {
  data(){
    return{
      dataList: [],                         // 分页数据
      coachDataList: [],
      currentPage: 1,                       // 当前页
      pageSize: 2,                          // 每页记录数
      total: 0,                             // 总记录数
      bookQueryVo: {
        leagueName: "",
        coachName: ""
      },
      coach: {},
    }
  },
  created() {
    this.getList();
    coach.queryAll().then(res =>{
      this.coachDataList = res.data;
    })
  },
  methods:{
    // 每页记录数发生变化
    handleSizeChange(size){
      this.pageSize = size;
      this.getList();
    },
    // 当前页发生变化
    handleCurrentChange(current){
      this.currentPage = current;
      this.getList();
    },
    getList(){
      book.search(this.currentPage, this.pageSize, this.bookQueryVo).then(res =>{
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
    // 更改课程的状态
    handleChangeStatus(val, bookId){
      console.log("===========" + val)
      console.log("===========" + bookId)
      book.modifyById(val, bookId).then(res =>{
        this.$message.success(res.message)
      })
    }
  }
}

</script>
